<template>
	<view class="graphic-inquiry">
		<!-- 描述问题 -->
		<view class="describe-case">
			<view class="describe-case-title">描述问题</view>
			<view class="describe-case-input">
				<textarea
					placeholder="为了医生更准确的判断您的问题，请您尽可能详细的描述您家宝贝的问题，并上传相关的视频、检查报告等。我们将通知对应的专家医生尽快和您沟通。(500字以内)"
					maxlength="500"
					placeholder-style="color: #666666; line-height:40rpx"
				/>
				<text class="textarea-number">0/500</text>
			</view>
			<view class="describe-case-imgList">
				<image class="describe-case-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				<image class="describe-case-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				<image class="describe-case-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				<image class="describe-case-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
				<image class="describe-case-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
			</view>
			<view class="describe-case-upload" @click="seleteType">
				<icon class="icon-UPLOADIMG"></icon>
				<view class="describe-case-upload-right">
					<text>图片/视频</text>
					<text>与本次咨询有关的图片/视频</text>
				</view>
			</view>
		</view>
		<!-- 服务保障 -->
		<view class="security-case"></view>
		<!-- 说明 -->
		<view class="explain-case">
			<icon class="icon-SHUOMING"></icon>
			<text>
				根据国家互联网宠物诊疗相关政策的要求，您使用本服务前需明确线上问诊适用于轻问诊、复诊以及第二诊疗建议。急诊病例请尽快线下就医。平台上的医生仅为您提供咨询服务，咨询建议供您参考。继续操作表示您已知悉并同意上述告知内容。
			</text>
		</view>
		<!-- 免费提问按钮 -->
		<view class="mianfei-case"><button class="mianfei-btn">免费提问</button></view>
		<!-- 弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-list">
				<view class="popup-item">上传图片</view>
				<view class="popup-item">上传视频</view>
				<view class="popup-cancel" @click="cancelType">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// 上传图片或视频
		seleteType() {
			this.$refs.popup.open();
		},
		// 取消选择
		cancelType() {
			this.$refs.popup.close();
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
@import '@/static/css/public.scss';
.graphic-inquiry {
	padding: 32rpx 20rpx 0;
	.describe-case {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 32rpx;
		margin-bottom: 24rpx;
		.describe-case-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
			margin-bottom: 32rpx;
		}
		.describe-case-input {
			padding: 30rpx 24rpx 80rpx;
			height: 288rpx;
			box-sizing: border-box;
			background: #f1f1f1;
			border-radius: 16px;
			position: relative;
			margin-bottom: 40rpx;
			& > textarea {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
			}
			.textarea-number {
				font-size: 24rpx;
				color: #666666;
				position: absolute;
				bottom: 24rpx;
				right: 24rpx;
			}
		}
		.describe-case-imgList {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			justify-content: space-between;
			.describe-case-img {
				width: 174rpx;
				height: 112rpx;
				margin-bottom: 10rpx;
				&:nth-last-of-type(-n + 3) {
					margin-bottom: 0;
				}
			}
			&::after {
				content: '';
				width: 174rpx;
				height: 0px;
				visibility: hidden;
			}
		}
		.describe-case-upload {
			display: flex;
			.icon-UPLOADIMG {
				width: 46rpx;
				height: 36rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-graphic-upload.png) no-repeat;
				background-size: cover;
				margin-top: 6rpx;
			}
			.describe-case-upload-right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				& > text:nth-of-type(1) {
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 4rpx;
				}
				& > text:nth-of-type(2) {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	.security-case {
		width: 100%;
		height: 128rpx;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-graphic-fwbz.png) no-repeat;
		background-size: cover;
		margin-bottom: 24rpx;
	}
	.explain-case {
		font-size: 28rpx;
		color: #999999;
		line-height: 36rpx;
		.icon-SHUOMING {
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-graphic-jinggao.png) no-repeat;
			background-size: cover;
			margin-right: 10rpx;
		}
	}
	.mianfei-case {
		padding: 0 40rpx;
		position: fixed;
		bottom: 68rpx;
		left: 0;
		right: 0;
		.mianfei-btn {
			width: 100%;
			height: 80rpx;
			background: #34d1a9;
			border-radius: 48rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
			line-height: 80rpx;
		}
	}
}
</style>
<style>
page {
	background: #f6f6f6;
}
</style>
